/**
 * Created by Administrator on 2017/3/14.
 */
var Button = require('../../../src/libs/button');
var Input = require('../../../src/libs/input');
var Password = require('../../../src/libs/password');
var FormItem = require('../../../src/libs/form-item');
var HyperLink = require('../../../src/libs/hyperlink');

/**
 * @function detectCapsLock
 * @desc 监听大小写
 * 监听password的onkeypress事件
 * @return true
 * */
var detectCapsLock = function(event){
    var e = event || window.event;
    var o = e.target || e.srcElement;
    var keyCode = e.keyCode || e.which; // 按键的keyCode
    //var isShift = e.shiftKey || (keyCode == 16) || false; // shift键是否按住
    if (keyCode >= 65 && keyCode <= 90) {
        return true;
    }else {
        return false;
    }
}

var Root = React.createClass({
    _capsLock:function(e){
        if(detectCapsLock(e)){
            window.PageDM.password.setError('大写锁定');
        }else{
            window.PageDM.password.setError('');
        }
    },
    toLogin:function (_id,e) {
        var e = e || window.event;
        if(e.keyCode == 13){
            if(_id){
                document.getElementById(_id).blur();
                PageDM.btn.onClick();
            }
        }
    },
    componentDidMount: function(){
        UEventHub.on(PageDM.imgBtn.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT,function(v){
            var _node = this.refs.imgcode;
            _node.setAttribute('src',PageDM.imgBtn.getValue());
        }.bind(this));
        UEventHub.emit("pageLoad","hello world!");
    },
    render: function () {
        var PageDM = window.PageDM;

        return (
            <div>

                <div className="container container-logo">
                    <div className="mod-login">
                        <div className="container form-login">
                            <div className="form-wrap">
                                <span className="angle angle-left-top"></span>
                                <span className="angle angle-right-bottom"></span>
                                <div className="form-group">
                                    <div className="logo-title"><b></b>登录<b></b></div>
                                </div>
                                <FormItem label={<i className="icon-phone iconfont"></i>} dmbind={PageDM.phone.dmbind}>
                                    <Input placeholder={PageDM.phone.placeholder} dmbind={PageDM.phone.dmbind} onKeyUp={this.toLogin.bind(this,PageDM.phone.dmbind)}/>
                                </FormItem>
                                <FormItem label={<i className="icon-lock iconfont"></i>} dmbind={PageDM.password.dmbind}>
                                    <Password placeholder={PageDM.password.placeholder} dmbind={PageDM.password.dmbind} onKeyPress={this._capsLock} onKeyUp={this.toLogin.bind(this,null)}/>
                                </FormItem>
                                <FormItem dmbind={PageDM.imgCode.dmbind}>
                                    <Input ref="test" placeholder={PageDM.imgCode.placeholder} className="ucs-input code" dmbind={PageDM.imgCode.dmbind} onKeyUp={this.toLogin.bind(this,PageDM.imgCode.dmbind)}/>
                                    <a href="javascript:void (0)" onClick={PageDM.imgBtn.onClick}>
                                        <img src={PageDM.imgBtn.value} className="f-left img-code" ref="imgcode" style={{height:"40px"}}/>
                                    </a>
                                </FormItem>
                                <div className="form-button">
                                    <Button value="马上登录" className="ucs-btn-confirm ucs-btn-block" onClick={PageDM.btn.onClick} onMouseDown={PageDM.btn.onMouseDown} dmbind={PageDM.btn.dmbind}/>
                                </div>
                                <div className="form-other">
                                     没有账号？
                                    <HyperLink text="快来注册" href={PageDM.URL.register} className="fc-link"/>
                                    <HyperLink text="忘记密码" href={PageDM.URL.findPwd} className="forget"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        )
    }
});
ReactDOM.render(<Root/>, document.getElementById('giraffe'));